<template>
  <div>
    <Authc permissions="auth:token:edit" v-if="!row.forceInvalid && !row.isExpire">
      <Tooltip content="强制失效" placement="top">
        <Icon class="error-icon-style" type="ios-undo" @click="handleForceInvalid" />
      </Tooltip>
    </Authc>
  </div>
</template>
<script>
import { Icon, Tooltip, Message, Modal } from "view-design";
import Authc from "@/components/Authc";
import { namespace } from "../../module";
import appService from "@/utils/appService";
import config from "@/utils/config";

export default {
  props: {
    row: Object
  },
  components: {
    Icon,
    Tooltip,
    Message,
    Authc
  },
  data: function() {
    return {};
  },
  methods: {
    handleForceInvalid() {
      let row = this.$props.row;
      let id = row.id;
      let store = this.$store;
      Modal.confirm({
        title: "确定强制失效",
        content: "该操作无法撤销",
        okText: "确定",
        cancelText: "取消",
        onOk: async () => {
          let responst = await appService.putRequest(
            `${config.serverProxy}${config.authServicePath}/auth/token/forceInvalid`,
            { id }
          );
          if (responst.data.errorCode === 0) {
            Message.success("强制失效成功");
            store.dispatch(`${namespace}/query`);
          }
        }
      });
    }
  }
};
</script>
<style lang="less">
.normal-icon-style {
  font-size: 20px !important;
  color: #57a3f3 !important;
}
.error-icon-style {
  font-size: 20px !important;
  color: #ff0000 !important;
}
</style>